<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<spring:url value="/resources/js-framework/datatables/jquery.dataTables.css" var="jquery_dataTables_css" />
<spring:url value="/resources/js-framework/datatables/jquery.dataTables.min.js" var="jquery_dataTables_min_js" />
<spring:url value="/resources/js-framework/populate/jquery.populate.pack.js" var="jquery_populate_pack_js" />

<spring:url value="/resources/js-framework/datatables/ColReorder.js" var="ColReorder_js" />
<spring:url value="/resources/js-framework/datatables/ColVis.js" var="ColVis_js" />
<spring:url value="/resources/js-framework/datatables/ColReorder.css" var="ColReorder_css" />
<spring:url value="/resources/js-framework/datatables/colVis_page.css" var="colVis_page_css" />
<spring:url value="/resources/js-framework/datatables/colVis_table.css" var="colVis_table_css" />
<spring:url value="/resources/js-framework/datatables/ColVis.css" var="ColVis_css" />
<spring:url value="/resources/css/calendar.css" var="calendar_css" />


<!-- DataTables CSS -->
<link href="${jquery_dataTables_css}" media="screen" rel="stylesheet" type="text/css" />

<link href="${colVis_page_css}" media="screen" rel="stylesheet" type="text/css" />
<link href="${colVis_table_css}" media="screen" rel="stylesheet" type="text/css" />
<link href="${ColReorder_css}" media="screen" rel="stylesheet" type="text/css" />
<link href="${ColVis_css}" media="screen" rel="stylesheet" type="text/css" />
<link href="${calendar_css}" media="screen" rel="stylesheet" type="text/css" />

<style type="text/css" title="currentStyle">
thead input {
	width: 100%
}
input.search_init {
	color: #999
}
</style>

<!-- DataTables -->
<script src="${jquery_dataTables_min_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<script src="${ColReorder_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>
<script src="${ColVis_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>


<!-- Populate -->
<script src="${jquery_populate_pack_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>


<script type="text/javascript" charset="utf-8">
		var oTable;
		
		function addDataTableSearch(table){
				
				$("thead input").keyup( function () {
					oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $("thead input").index(this) ) );
				} );
				$("thead input").each( function (i) {
					this.initVal = this.value;
				} );
				$("thead input").focus( function () {
					if ( this.className == "search_init" ){
						this.className = "";
						this.value = "";
					}
				} );
				
				$("thead input").blur( function (i) {
					if ( this.value == "" ){
						this.className = "search_init";
						this.value = this.initVal;
					}
				} );
				
				oTable = $(table).dataTable( {
					"sDom": 'RC<"clear">lfrtip',
					"bDestroy": true,
					"aoColumnDefs": [
						{ "bVisible": false, "aTargets": [] }
					],
					"oLanguage": {
						"sSearch": "Search all columns:"
					},
					"bSortCellsTop": true
				} );

		}
		
		// Wait until the DOM has loaded before querying the document
		$(document).ready(function(){
			$(".tab_div").hide();
			$('ul.tabs a').click(function () {
				$(".tab_div").hide().filter(this.hash).show();
				$("ul.tabs a").removeClass('active');
				$(this).addClass('active');
				$("#maitainanceId").css("display","none");
				return false;
			}).filter(':first').click();
			$('#update').click(function(){
				displayMaintainance();
			});
			
			var resourceallocationTable = $('#resourceallocationTableId').dataTable({
				"sDom": 'lfrtip'
			});
		});

	
	function updateAddNewClickEvent(){
		$('#addNew').live("click", function(){	
			tempId=$("table.addNewRow tbody").find("tr").length;
			var tempID=tempId+1;	
			
			var newRow = "<tr title='rowData' id='row"+tempID+"'><td>YI1070</td><td valign='middle'>"+tempID+"</td><td align='center' valign='middle'><select name='select5' class='large'><option selected='selected'>Select</option><option>Bench </option><option>Project</option><option>Project-Partial</option><option>Shadow</option></select></td><td align='center' valign='middle'><input type='text' value='' name='textfield8' /></td><td align='center' valign='middle'><input type='text' value='' name='textfield8' /></td><td align='center' valign='middle'><input type='text' value='' name='textfield9' /></td><td align='center' valign='middle'><select name='select6' class='dd_cmn' dd_div='dealer'><option>Select</option><option>Loaned</option><option>Own</option></select></td><td align='center' valign='middle'><select name='select7'><option selected='selected'>Select</option><option>JD</option><option>NCO</option><option>PRAXIS</option></select></td><td align='center' valign='middle'><select name='select8'><option selected='selected'>Select</option><option>Shantanu Rao</option><option>Mahendra</option><option>Pranav</option></select></td><td align='center' valign='middle'><input type='text' value='' name='textfield10' /></td><td align='center' valign='middle'><input type='text' value='' name='textfield17' /></td><td align='center' valign='middle'><select name='select11'><option selected='selected'>Select</option><option>Yes</option><option>No</option></select></td><td align='center' valign='middle'><select name='select12'><option selected='selected'>Select</option><option>Yes</option><option>No</option></select></td><td align='center' valign='middle'><input type='text' value='' name='textfield17' /></td></tr>";
			
			$(".addNewRow tbody").append(newRow);
			
			$("table.addNewRow tbody").find("tr[title=rowData]").each(function(index){
			var temp=("row"+(index+1));
			var tempNumber=index+1;
			if(tempNumber%2==0){
				$(this).attr("class","even");
			}else{
				$(this).attr("class","odd");
			}
			$(this).attr("id",temp);
		});
		});
	}

function displayMaintainance(){
	$("#maitainanceId").css("display","inline-block");
	 $("ul.tabs a").removeClass('active');
	 $(".tab_div").hide().next("#tab2".hash).show();
	 $('a[href$="tab2"]').addClass('active');
} 

function openMaintainance(id){
	getResourceAllocationById(id);
	displayMaintainance();
}

function getResourceAllocationById(id){
	$.getJSON("resourceallocations",{find:"ByEmployeeId" , employeeId:id}, showResourceAllocation);
}

function showResourceAllocation(data){
	if(oTable != null)oTable.fnClearTable();
	var str = createTableRows(data);
	$("#example > tbody:last").append(str);
	addDataTableSearch($("#example"));
	updateAddNewClickEvent();
	
}


function createTableRows(data){
	var str = '';
	$.each(data,function(index,row){
		str +=  '<tr>'+
		'<td class="center">'+row.id+'</td>'+ 
		'<td class="center">'+ row.allocationSeq +'</td>'+
		'<td class="center">'+ row.allocationTypeId.allocationtype +'</td>'+
        '<td class="center">'+ row.allocStartDate +'</td>'+
        '<td class="center">'+ row.allocEndDate +'</td>'+
        '<td class="center">'+row.ownershipId.ownershipName +'</td>'+
        '<td class="center">'+ row.projectId.id+'</td>'+
        '<td class="center">'+ row.projectId.projectName+'</td>'+
        '<td class="center">'+ row.employeeId.currentReportingManager+'</td>'+
        '<td class="center">'+ row.allocBlock+'</td>'+
        '<td class="center">'+ row.allocRemarks+'</td>'+
        '<td class="center">'+ row.curProj+'</td>'+
        '<td class="center">'+ row.billable+'</td>'+
        '<td class="center">'+ row.allocHrs+'</td>'+
        '<td class="center">'+ row.rateId.rateid+'</td>'+
        '</tr>';
      	
	});
	
	return str;
}

function displayMaintainance(){
	$("ul.tabs a").removeClass('active');
	$(".tab_div").hide().next("#tab2".hash).show();
	$('a[href$="tab2"]').addClass('active');
}

function saveResourceAllocation(){
	var pk = $("#resourceallocationForm input[name=id]").val();
	//not doing any validation .. We will use jquery validation framework to do that for us before form gets submitted
	if( pk != null && pk > 0){
		 $.putJson('resourceallocations', $("#resourceallocationForm").toDeepJson(),function(data){
			 location.reload();
		 } ,'json');
	}else{
		 $.postJson('resourceallocations',$("#resourceallocationForm").toDeepJson() , function(data){
			 //should call refreshGrid instead of location reload, and update customerTableId table.
			 location.reload();
		}, 'json'); 				
	}
}

function refreshGrid(){
	$.getJSON("resourceallocations", function(data){
		
	});
}

</script>

 <div class="mid_section"> 
          <!--right section-->
          <div class="botMargin">
            <h1>Resource Allocation</h1>
          </div>
          <div class="breadcrums"> <a class="breadcrumbslink" href="#">RAM</a> <img src="resources/images/imgBreadCrumsArrow.gif" width="10" height="11" /> <strong>Page Name</strong> </div>
          <div class="tab_seaction">
            <ul class='tabs'>
              <li><a href='#tab1'>List</a></li>
              <li><a href='#tab2'>Maintenance</a></li>
            </ul>
            <div id='tab1' class="tab_div"> 
              
              <div class="tbl">
                <table id="resourceallocationTableId">
                  <thead>
                    <tr>
                      <th width="20%" align="center" valign="middle">Employee ID</th>
                      <th width="20%" align="center" valign="middle">Employee Name</th>
                      <th width="20%" align="center" valign="middle">Designation </th>
                      <th width="20%" align="center" valign="middle">Grade </th>
                      <th width="19%" align="center" valign="middle">Ownership </th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="resource" items="${resources}">
							<tr id="${resource.employeeId}">
								<td align="center" valign="middle"><a href="#" onclick="openMaintainance(${resource.employeeId});">${resource.employeeId}</a></td>
								<td align="center" valign="middle">${resource.employeeName}</td>
								<td align="center" valign="middle">${resource.designationId.designationName}</td>
								<td align="center" valign="middle">${resource.gradeId.grade}</td>
								<td align="center" valign="middle">${resource.ownership.ownershipName}</td>
							</tr>
					</c:forEach>
                  </tbody>
                </table>
              </div>
              <div class="clear"></div>
            </div>
            <div id='tab2' class="tab_div">
              <div class="search_filter">
                <div align="right"> <a href="javascript:void(0);" class="blue_link" id="addNew" > <img src="resources/images/addUser.gif" width="16" height="22" /> Add New </a> &nbsp; &nbsp; <a href="#" class="blue_link" id="save"> <img src="resources/images/save.png" name="save" width="16" height="22"  /> Save </a> </div>
              </div>
              <div class="tbl">
                <table id="example"  class="display tablesorter addNewRow">
                <thead>
                    <tr>
                      <th>Employee ID</th>
                      <th>Allocation Sequence</th>
                      <th>Allocation Type</th>
                      <th>Start Date</th>
                      <th>End Date</th>
                      <th>Ownership</th>
                      <th>Project ID</th>
                      <th>Project Name</th>
                      <th>Project Manager</th>
                      <th>Allocation Blocked</th>
                      <th>Allocation Remarks</th>
                      <th>Current Project</th>
                      <th>Billable</th>
                      <th>Allocation Hours</th>
                      <th>Rate ID</th>
                    </tr>
                    <tr class="noBg">
                      <td><input type="text" name="search_empID" value="Employee ID" class="search_init" /></td>
                      <td><input type="text" name="search_alSeq" value="Allocation Sequence" class="search_init" /></td>
                      <td><input type="text" name="search_alType" value="Allocation Type" class="search_init" /></td>
                      <td><input type="text" name="search_stDate" value="Start Date" class="search_init" /></td>
                      <td><input type="text" name="search_enDate" value="End Date" class="search_init" /></td>
                      <td><input type="text" name="search_own" value="Ownership" class="search_init" /></td>
                      <td><input type="text" name="search_pID" value="Project ID" class="search_init" /></td>
                      <td><input type="text" name="search_pName" value="Project Name" class="search_init" /></td>
                      <td><input type="text" name="search_pMan" value="Project Manager" class="search_init" /></td>
                      <td><input type="text" name="search_alBloc" value="Allocation Blocked" class="search_init" /></td>
                      <td><input type="text" name="search_alRem" value="Allocation Remarks" class="search_init" /></td>
                      <td><input type="text" name="search_cProj" value="Current Project" class="search_init" /></td>
                      <td><input type="text" name="search_billable" value="Billable" class="search_init" /></td>
                      <td><input type="text" name="search_alHours" value="Allocation Hours" class="search_init" /></td>
                      <td><input type="text" name="search_rId" value="Rate ID" class="search_init" /></td>
                    </tr>
                  </thead>
                   <tbody id="exampleBody">
                   </tbody>
                </table>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <!--right section--> 
        </div>